<template>
  <div>
    <div class="login-banner">
      <div class="logo"></div>
    </div>
    <form @submit.prevent="login" class="form" id="login">
      <div class="text user-icon">
        <input type="text" placeholder="请输入用户名"  v-model="userName">
      </div>
      <div class="text pwd-icon">
        <input type="password" placeholder="请输入密码"  v-model="secretkey">
      </div>
      <input type="submit" value="登录" class="submit">
    </form>
    <div class="forget">
      <router-link to="/forget">
        <a href="javascript:;" >
          忘记密码
        </a>
      </router-link>

    </div>
  </div>

</template>

<script>
import { Toast } from 'vant';   //使用消息提示
import {reqLogin,reqTeacherClass} from "@/api";   //api  请求
export default {
        name: "login",
    data(){
          return{
            userName:'',
            secretkey:'',
          }
    },
    methods: {
        async login() {
        if(!this.userName){
          Toast('用户名不能为空')
          return
        }else if(!this.secretkey){
          Toast('密码不能为空')
          return;
        }else{
          const user = await reqLogin(this.userName,this.secretkey)
          if(user.status){
            this.$toast('登录成功');
            localStorage.setItem('userName',this.userName)
            localStorage.setItem('secretkey',this.secretkey)
            localStorage.setItem('token',user.data.token)
            // console.log(user.data.fullName)
            //登录成功 获取任教班级
            // console.log(user.data.id)
            const teacherClass = await reqTeacherClass(user.data.id)
            // console.log(teacherClass.data)
            if(teacherClass.status){
              //保存到vuex
              this.$store.dispatch('recordTeacherClass',teacherClass.data)
            }
            //保存数据到vuex
            this.$store.dispatch('recordUser',user.data)

              this.$router.replace('/class')


          }else{
            Toast(user.message)
          }
        }
      },
    },
    mounted() {
      this.userName = localStorage.getItem('userName')
      this.secretkey = localStorage.getItem('secretkey')
    }
}
</script>

<style scoped>
  .forget{ font-size: 1.1rem; height: 1.1rem; color: #666;  width: 25rem; margin: 0rem auto;}
  .forget a{ float: right;}
  .login-banner{width: 100%; height: 12.5rem; background:url(./images/login-banner-bg.png) no-repeat center #00c08c; background-size: cover; position: relative;}
  .logo{width: 5.45rem; height: 5.45rem; position: absolute; left: calc(50% - 2.725rem); top:calc(50% - 2.725rem); overflow: hidden; border-radius: 50%;
    background:url(./images/logo.png) no-repeat center #fff; background-size:auto 5.45rem !important;}
  .form{ background: #fff; padding-bottom: 2rem;}
  .text {width: 21rem; height: 4.5rem; border-bottom: 1px solid #bfbfbf; margin: 0 auto; padding-left: 4rem; }
  .user-icon{ background: url(./images/user-icon.png) no-repeat 1.525rem 1.68rem; background-size: 1.125rem 1.125rem;}
  .pwd-icon{ background: url(./images/pwd-icon.png) no-repeat 1.525rem 1.68rem; background-size: 1.125rem 1.125rem;}
  .text input{ width: 21rem; float: left; height: 4.5rem; line-height: 4.5rem; font-size: 1.05rem; padding:0;}
  .submit{width: 25rem; height: 2.95rem; border-radius: 0.25rem; background: #00c08c; border:none; margin: 3.5rem auto 0; display: block; color:#fff; font-size: 1.05rem; text-align: center; line-height: 2.95rem;}

</style>
